<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="titles"></c-nav-bar>
		<view class="aroundList2 ai2" v-if="comment!=null">
			<!-- 		<view class="title">
				<view class="title-left">
					全部评价
				</view>
			</view> -->
			<view class="aroundList2-one">
				<view class="aroundList2-one-hander">
					<view class="a-o-h-left">
						<view class="a-o-h-1">
							{{score==0?'0.0':score}}
						</view>
						<view class="a-o-h-2">
							<view class="a-o-h-21">
								分
							</view>
							<view class="a-o-h-22">
								{{commentList.commentNums}}条
							</view>
						</view>
					</view>
					<view class="a-o-h-right">
						<view class="a-o-h-3">
							<view class="a-o-h-31">
								<text>描述</text> <text> {{describeScore==0?'0.0':describeScore}}</text>
							</view>
							<view class="a-o-h-32">
								<text>服务</text> <text>{{serviceScore==0?'0.0':serviceScore}}</text>
							</view>
						</view>
						<view class="vertical">

						</view>
						<view class="a-o-h-3">
							<view class="a-o-h-31">
								<text>位置</text> <text>{{locationScore==0?'0.0':locationScore}}</text>
							</view>
							<view class="a-o-h-32">
								<text>卫生</text> <text>{{hygieneScore==0?'0.0':hygieneScore}}</text>
							</view>
						</view>
						<view class="vertical">

						</view>
						<view class="a-o-h-3">
							<view class="a-o-h-31">
								<text>便捷</text> <text>{{convenienceScore==0?'0.0':convenienceScore}}</text>
							</view>
							<view class="a-o-h-32">
								<text>性价比</text> <text>{{costScore==0?'0.0':costScore}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="aroundList2-one-bottom" v-for="item,index in comment">
						<view class="a-o-b-one">
							<view class="a-o-b-1">
								<image :src="item.headUrl" mode="aspectFill"></image>
							</view>
							<view class="a-o-b-2">
								<view class="a-o-b-name">
									{{item.creatorName}}
								</view>
								<view class="a-o-b-time">
									{{item.createDate}}
								</view>
							</view>
						</view>
						<view class="a-o-b-two">
							<view class="a-o-b-title">
								{{item.comment}}
							</view>
							<view class="a-o-b-pic" v-if="item.imgUrl">
								<view class="image" v-for="ite,i in item.imgUrl.split(',') ">
									<image :src="ite" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="" style="width: 100%; text-align: center;" v-else>
			暂无点评
		</view>

	</view>
</template>

<script>
	export default {
		name: 'payResult',
		data() {
			return {
				price: '',
				orderId: '',
				titles: '全部评价',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fromData: {
					homestayId: '',
					limit: 10,
					page: 1
				},
				commentList: [],
				comment: [],
				imgUrlList: [],
				score: 0,
				describeScore: 0,
				serviceScore: 0,
				locationScore: 0,
				hygieneScore: 0,
				convenienceScore: 0,
				costScore: 0,





			}

		},
		onLoad(option) {
			this.fromData.homestayId = option.obj
			this.getcomment()
			this.getcommentList()
		},
		methods: {
			// 获取客房点评信息
			getcomment() {
				this.$api.get(`/api/hotel/comment/getHotelCommentCount/${this.fromData.homestayId}`)
					.then(res => {
						this.commentList = res.data.data



						var score = res.data.data.score.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (score.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = score.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							score = `${integerPart}.${decimalPart}`;
						} else {
							score += ".0";
						}
						this.score = score



						var describeScore = res.data.data.describeScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (describeScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = describeScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							describeScore = `${integerPart}.${decimalPart}`;
						} else {
							describeScore += ".0";
						}
						this.describeScore = describeScore


						var serviceScore = res.data.data.serviceScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (serviceScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = serviceScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							serviceScore = `${integerPart}.${decimalPart}`;
						} else {
							serviceScore += ".0";
						}
						this.serviceScore = serviceScore


						var locationScore = res.data.data.locationScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (locationScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = locationScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							locationScore = `${integerPart}.${decimalPart}`;
						} else {
							locationScore += ".0";
						}
						this.locationScore = locationScore


						var hygieneScore = res.data.data.hygieneScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (hygieneScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = hygieneScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							hygieneScore = `${integerPart}.${decimalPart}`;
						} else {
							hygieneScore += ".0";
						}
						this.hygieneScore = hygieneScore


						var convenienceScore = res.data.data.convenienceScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (convenienceScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = convenienceScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							convenienceScore = `${integerPart}.${decimalPart}`;
						} else {
							convenienceScore += ".0";
						}
						this.convenienceScore = convenienceScore

						var costScore = res.data.data.costScore.toString(); // 转成字符串类型  如能确定类型 这步可省去
						if (costScore.indexOf(".") !== -1) {
							let [integerPart, decimalPart] = costScore.split(".");

							if (decimalPart.length > 2) {
								decimalPart = decimalPart.substring(0, 2);
							} else if (decimalPart.length === 1) {
								decimalPart += "0";
							}
							costScore = `${integerPart}.${decimalPart}`;
						} else {
							costScore += ".0";
						}
						this.costScore = costScore





					})
			},
			// 获取客房点评信息
			getcommentList() {
				this.$api.get('/api/hotel/comment/page', this.fromData)
					.then(res => {
						this.comment = res.data.data.list

						this.comment.forEach((item, index) => {
							this.imgUrlList = item.imgUrl.split(',');
						})

					})
			},

		}
	}
</script>

<style scoped lang="less">
	.aroundList2 {
		padding: 0rpx 24rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: space-between;

			.title-left {
				font-size: 36rpx;
				font-weight: bold;
				color: #111111;
			}

			.title-right {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title-right-text {
					font-size: 26rpx;
					font-weight: Regular;
					color: #007A69;
				}

				.image {
					width: 28rpx;
					height: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.aroundList2-one {


			.aroundList2-one-hander {
				margin: 30rpx 0 24rpx;
				width: 100%;
				height: 156rpx;
				background-color: #F7F8FB;
				border-radius: 16rpx;
				display: flex;
				// margin: auto 26rpx;

				.a-o-h-left {
					display: flex;
					margin: auto 26rpx;

					.a-o-h-1 {
						font-size: 88rpx;
						color: #111111;
						font-weight: bold;
					}

					.a-o-h-2 {
						margin: auto 5rpx;

						.a-o-h-21 {
							font-size: 30rpx;
							color: #333;
							font-weight: Regular;
						}

						.a-o-h-22 {
							font-size: 30rpx;
							color: #333;
							font-weight: Regular;
						}
					}
				}

				.a-o-h-right {
					display: flex;
					margin: auto;

					.vertical {
						// margin: auto;
						width: 1rpx;
						height: 52rpx;
						background-color: #D6D8E1;
						margin: 8rpx 12rpx 0 8rpx;
					}

					.a-o-h-3 {
						margin: auto;

						.a-o-h-31 {

							text:nth-child(1) {
								font-size: 24rpx;
								color: #777777;
								font-weight: Regular;
							}

							text:nth-child(2) {
								font-size: 24rpx;
								color: #333;
								font-weight: bold;
								margin: 0 6rpx 0 12rpx;
							}
						}

						.a-o-h-32 {
							text:nth-child(1) {
								font-size: 24rpx;
								color: #777777;
								font-weight: Regular;
							}

							text:nth-child(2) {
								font-size: 24rpx;
								color: #333;
								font-weight: bold;
								margin: 0 6rpx 0 12rpx;
							}
						}
					}

				}
			}


			.aroundList2-one-centent {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0 30rpx;

				.a-o-c-1,
				.a-o-c-2,
				.a-o-c-3 {
					border-radius: 16rpx;
					width: 220rpx;
					height: 60rpx;
					background-color: #F4F5F7;
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					color: #333333;
					font-weight: Regular;
				}
			}

			.aroundList2-one-bottom {
				box-sizing: border-box;
				margin-bottom: 30rpx;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.a-o-b-one {
					// margin: 25rpx 0 10rpx;
					display: flex;
					align-items: center;

					.a-o-b-1 {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50rpx;
						margin: 0 9rpx;

						image {
							border-radius: 50rpx;
							width: 100%;
							height: 100%;
						}
					}

					.a-o-b-2 {
						.a-o-b-name {
							font-size: 24rpx;
							color: #2C2C2C;
							font-weight: bold;
							margin-bottom: 10rpx;
						}

						.a-o-b-time {
							font-size: 20rpx;
							color: #777777;
							font-weight: Regular;
						}
					}
				}

				.a-o-b-two {
					.a-o-b-title {
						margin: 25rpx 0 10rpx;
						font-size: 26rpx;
						color: #333333;
						font-weight: Regular;
					}

					.a-o-b-pic {
						display: flex;
						// justify-content: space-between;

						.image {
							width: 212rpx;
							height: 212rpx;
							border-radius: 16rpx;
							margin-right: 20rpx;

							image {
								border-radius: 16rpx;
								width: 100%;
								height: 100%;
							}
						}
					}
				}


			}


		}

	}
</style>